<template>
  <div>
    <div class="msg-box">
      <h3>消息</h3>
      <div class="total">共1条未读信息</div>
      <ul class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell mui-media">
          <a class="mui-navigate-right">
            <img class="mui-media-object mui-pull-left" src="../../static/images/shuijiao.jpg">
            <div class="mui-media-body">都是好东西旗舰店
              <p class="mui-ellipsis">[验收提醒]</p>
            </div>
            <div class="time">
              <div>10:30</div>
              <div class="mui-badge mui-badge-danger">1</div>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media">
          <a class="mui-navigate-right" href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../../static/images/shuijiao.jpg">
            <div class="mui-media-body">没有不好的旗舰店
              <p class="mui-ellipsis">[验收提醒]</p>
            </div>
            <div class="time">
              <div>昨天</div>
              <div class="mui-badge mui-badge-danger mui-hidden"></div>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media">
          <a class="mui-navigate-right">
            <img class="mui-media-object mui-pull-left" src="../../static/images/shuijiao.jpg">
            <div class="mui-media-body">上新旗舰店
              <p class="mui-ellipsis">上新了</p>
            </div>
            <div class="time">
              <div>19/03/08</div>
              <div class="mui-badge mui-badge-danger mui-hidden"></div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "消息"
    };
  },
  created() {
    this.login();
    this.showTitle(this.title);
  },
  methods: {
    showTitle(title) {
      this.$emit("getTitle", title);
    },
    login(){
      this.$emit("checkin")
    },
  }
};
</script>

<style lang="scss" scoped>
.msg-box {
  h3 {
    padding: 20px 0 10px 20px;
  }
  .total {
    padding-left: 20px;
    padding-bottom: 10px;
  }
  .mui-table-view {
    &::before {
      height: 0;
    }
    &::after {
      height: 0;
    }
    .mui-table-view-cell {
      .mui-navigate-right {
        position: relative;
        &::after {
          display: none;
        }
        img {
          border-radius: 5px;
        }
        .time {
          position: absolute;
          top: 15%;
          right: 20px;
          color: #bbb;
          text-align: center;
        }
      }
    }
  }
}
</style>